Форум

psfdek · #1 (**permalink**) 24.06.2014, 09:15

Делаю форму ajax, но незнаю как этим способом передать мультиселект. Точнее его выбранные элементы.

<span class="row_2">
				<form onsubmit="return false">
					<span class="child_row_1">
						<label for="с_kv">Должности</label>
							<select id="ranks[]" name="ranks[]" size="5" multiple>
								<option value="Koterov">one</option>
								<option value="Wyke">two</option>
								<option value="Wyke">two</option>
								<option value="Wyke">two</option>
								<option value="Wyke">two</option>
								<option value="Wyke">two</option>
								<option value="Wyke">two</option>
								<option value="Wyke">two</option>
								<option value="Welling">three</option>
							</select>
					</span>
					<span class="child_row_2">
							<input placeholder="Название должности" id="rank_text" type="text" name="text" />
							<button class="bt1" id="ch_2_bt1" value="add" onclick="getXml2()">Добавить</button>
							<button class="bt2" id="ch_2_bt2" value="del" onclick="getXml2()">Удалить</button>
						<div class="row_2_rez" id="divResult2">результат</div>
					</span>	
				</form>
			</span>

function getXml2(){
		var link = '/query_role_rank_add_del.php';
		var divid = 'divResult2';
		var val1 = document.getElementById('ranks[]').value;
		var val2 = document.getElementById('rank_text').value;
		var val3 = document.getElementById('ch_2_bt2').value;
		var sVl ='ranks[]='+val1+'&rank_text='+val2+'&ch_2_bt2='+val3;
		getXml2St1(sVl,divid,link);
	}
function getXmlHttpRequest(){
	if(window.XMLHttpRequest)
		return new XMLHttpRequest();
	else
		return null;
}

function getXml2St1(reqSt1,divid,link){
	var reqString1 = getXmlHttpRequest();
	reqString1.onreadystatechange = function(){
			if(reqString1.readyState != 4) return;{
				var resultCheck = document.getElementById(divid);
				resultCheck.firstChild.nodeValue = reqString1.responseText;
				resultCheck.innerHTML = reqString1.responseText;
			}
		};
	reqString1.open('GET', 'http://test.bfgamershd.ru'+link+'?'+reqSt1, true);
	reqString1.send(null);
	writeResultTrComp();
}

if (isSet($_GET['ch_2_bt2']))
     { echo '1';
       if ( isSet($_GET['ranks']) )
       // если выбран хотя бы один элемент списка
       {echo '2';
          foreach ( $_GET['ranks'] as $v )
              echo "$v<br>";
       }
       else
          echo 'Ничего не выбрано<br>';
     };

В песочнице
http://learn.javascript.ru/play/AHVqxb

Brutus · #2 (**permalink**) 27.06.2014, 01:01

Ну как-то так

http://learn.javascript.ru/play/96C1fb

<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
    <form onsubmit="func(this);return false;" action="php.php?noJs=true">
      <label for="ranks">Должности</label><br>
      <select id="ranks" name="ranks" size="5" multiple="multiple">
        <option value="Koterov">one</option>
        <option value="Wyke">two</option>
        <option value="Wyke">two</option>
        <option value="Wyke">two</option>
        <option value="Wyke">two</option>
        <option value="Wyke">two</option>
        <option value="Wyke">two</option>
        <option value="Wyke">two</option>
        <option value="Welling">three</option>
      </select>
      <br>
      
      <input placeholder="Название должности" id="name" type="text" name="name" /><br>
      <input type="submit" name="add" value="Добавить"onclick="this.form.submitted = this.name"><br>
      <input type="submit" name="del" value="Удалить" onclick="this.form.submitted = this.name">
    </form>
    <div id="result">Результат: </div>
    <script>
      function getSelectMult(elm){
        if (!elm.options) 
          return null;
        
        var ops = [];
        for (var i = 0; i < elm.options.length; i++)
          if (elm.options[i].selected)
            ops.push(elm.options[i].value);
        return ops;
      }
      if (typeof XMLHttpRequest === "undefined") {
        XMLHttpRequest = function () {
          try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
          catch (e) {}
          try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
          catch (e) {}
          try { return new ActiveXObject("Microsoft.XMLHTTP"); }
          catch (e) {}
          alert('Error');
        };
      }

      function func (elm) {
        var sel = getSelectMult(elm.elements["ranks"]).join(',');
        var nam = elm.elements["name"].value;
        var div = document.getElementById('result');
        var val = elm.submitted || "add";
        
        
        var xhr = new XMLHttpRequest();
        xhr.open("GET",'/php.php?d='+encodeURIComponent(sel)+'&n='+encodeURIComponent(nam)+'&t='+val, true);
        
        xhr.onreadystatechange = function() {
          if(this.readyState == 4)
            if(this.status == 200){
              div.innerHTML = div.innerHTML + "Успех";
              
            }else
              div.innerHTML = "Результат: Неудача";
          else
            div.innerHTML = "Результат: Неудача";
        }
        
        xhr.send('');
      }
      
    </script>

  </body>
</html>

/php.php

if ($_GET['noJs'] != true){
    $d = explode(',',$_GET['d']);//Наши должности в массиве
    $n = $_GET['n'];//Название должности
    $t = $_GET['t'];//add или del
    //ваш код
}else{
    //ваш код приема формы без ajax
    
}

Форум

Справочник

Discord чат

Курсы javascript